<template>
  <div class="layout-container boundary-calculate">
    <PageHeader title="抗干扰性能边界推算表">
      <template #btns>
        <div class="search">
          <div class="span1">
            <span style="color: #01125A;font-size: 18px;font-weight: bold;">抗干扰性能边界推算表</span>
          </div>
        </div>
      </template>
      <template #search>
        <TagIcon :title="`对抗案例:${route.query.dealSamplename}-${route.query.dealSampleId}`" :style="tagIconStyle"/>
      </template>
    </PageHeader>
    <div class="visual-box">
      <TagIcon :title="`基础信息`" :style="tagIconStyle"/>
      <div class="base-info-form" :style="{ padding: '16px' }">
        <el-form class="baseinfo" v-loading="loadinginfo" :model="baseForm" :inline="true" ref="baseFormref" label-width="85px">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="作战想定场景" prop="scenarioDes" >
                <el-input v-model="baseForm.scenarioDes" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="导引头体制" prop="dytStyle" label-width="120px">
                <el-input v-model="baseForm.dytStyle" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="干扰类型" prop="interType" label-width="120px">
                <el-input v-model="baseForm.interType" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    <div>
      <CommonTable 
        :showSelection=false
        :showIndex=false
        :show-pagination=false
        v-loading="loadingevaluate"
        v-model:page="page"
        :total="total"
        :data="state.tableData"
        :header-cell-style="{'text-align':'center'}" 
        :cell-style="{'text-align':'center'}" 
        style="width: 100%">
        <el-table-column prop="bjinfo" label="边界信息" />
        <el-table-column prop="bj" label="推算边界" />
        <el-table-column prop="dw" label="单位" />
      </CommonTable>
    </div>

      <!-- <TagIcon title="关键要素展示" :style="tagIconStyle"/>
      <div class="base-info-form" :style="{ padding: '16px' }">
        <el-form class="baseinfo" :model="keyparamform" :inline="true" ref="keyparamformref" label-width="85px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item prop="echart_1">
                <el-select v-model="keyparamform.echart_1" @change="setshowEcharts_1(keyparamform.echart_1)" style="padding-left: 16px" >
                  <el-option 
                    v-for="item in category"
                    :key="item.keyparams"
                    :label="item.keyparams"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="echart_2">
                <el-select v-model="keyparamform.echart_2" @change="setshowEcharts_2">
                  <el-option 
                    v-for="item in category"
                    :key="item.keyparams"
                    :label="item.keyparams"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
      </div>
      <LineEchart  
        :echart_1_value = valueechart_1
        :echart_2_value = valueechart_2
        :key="timer"
      /> -->
    </div>
    <div class="step-buttons common-buttons">
      <el-button type="primary" @click="onBack">返回</el-button>
      <el-button type="primary" @click="onExport">导出</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import PageHeader from '@/components/page-header/index.vue';
import CommonTable from '@/components/common-table/index.vue';
import TagIcon from '@/components/tag-icon/index.vue';
import { Page } from '@/components/common-table/type';
import * as echarts from 'echarts';
import { Citeresult,downloadboundaryExcelFile,getkeyparamsList,getEcharts} from '@/api/antiJamPerformBoundaryCalculate';
import store from '@/store'
import router from '@/router';
import { downloadFile } from '@/utils/tools' 
// import LineEchart from './LineEchart/index.vue'
let $router = useRouter();
const route = useRoute();
const state = reactive<any>({
  tableData: [],
});
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const total = ref<number>(0);
const tagIconStyle = reactive({ padding: '16px' });
const loadinginfo = ref<boolean>(false);
const loadingevaluate = ref<boolean>(false);
const echartloading = ref<boolean>(false);
const echartloading1 = ref<boolean>(false);
const baseForm = ref<any>({
});
const baseFormref = ref<FormInstance>()
const resultForm = ref<any>({
});
const resultFormref = ref<FormInstance>()
const keyparamform = ref<any>({
});
const keyparamformref = ref<FormInstance>()
const lineRef = ref<any>(null);
const lineRef_1 = ref<any>(null);
const category = ref<any>({
});
const valueechart_1 = ref<any>();
const valueechart_2 = ref<any>();
onMounted(() => {
  onQuery({caseId:route.query.dealSampleId});
});
let timer: any = null;
//获取关键参数下拉框
const keyparamsList = async() =>{
  let params = {
    pageNo:1,
    pageSize:100,
  }
  // let result = await getkeyparamsList(params);
  let result = {
        code: 200,
        data: {
            rows:[
            {
                id: '1',
               keyparams: '作战天气',
            },
            {
                id: '2',
               keyparams: '作战环境',
            }]
        },
        msg: ''
      };
  category.value=result.data.rows;
};
keyparamsList();

// //图数据获取
const setshowEcharts_1 = async(id:any)=>{
  timer = new Date().getTime();
  let params = {
    id:id,
  }
  // let result = await getEcharts(params);
  let result = {
        code: 200,
        data: {
          category:["1","2","3","4","5","6","7","8"],
          values:[ 900 , 1000 , 800 , 700 , 1400 , 1300 , 900 , 1000 ]
        },
        msg: ''
      };
  valueechart_1.value = result.data;
}
const setshowEcharts_2 = async(id:any)=>{
  timer = new Date().getTime();
  let params = {
    id:id,
  }
  // let result = await getEcharts(params);
  let result = {
        code: 200,
        data: {
          category:["1","2","3","4","5","6","7","8"],
          values:[ 1000 , 900 , 1200 , 1100 , 1200 , 1300 , 1050 , 1000 ]
        },
        msg: ''
      };
  valueechart_2.value = result.data;
  
}
//解密
const decode = (str:string) => {
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
// 查询数据
const onQuery = async(val: any) => {
  const params = {
    ...val,
  };
  loadinginfo.value = true;
  loadingevaluate.value = true;
  if(route.query.looknum==1){
    let rows = JSON.parse(decode(route.query.value));
    baseForm.value = rows;
    state.tableData = totable(JSON.parse(rows.result));
  }else if(route.query.looknum==0){
    let result = await Citeresult(params);
    baseForm.value = result.data.adversCase;
    state.tableData = totable(result.data.boundaryJson)
  }
  nullinput();
  loadinginfo.value = false;
  loadingevaluate.value = false;
  
};
const nullinput = () => {
  if(!baseForm.value.scenarioDes){
    baseForm.value.scenarioDes = "---"
  }
  if(!baseForm.value.interType){
    baseForm.value.interType = "---"
  }
  if(!baseForm.value.dytStyle){
    baseForm.value.dytStyle = "---"
  }
}
const totable = (data: any) => {
  let keys = [{"bjinfo":"发现距离推算边界","bj":data.discoverDist_lower+"—"+data.discoverDist_upper,"dw":"m"},
  {"bjinfo":"跟踪距离推算边界","bj":data.followDist_lower+"—"+data.followDist_upper,"dw":"m"},
  {"bjinfo":"距离跟踪精度推算边界","bj":data.distFollowAcc_lower+"—"+data.distFollowAcc_upper,"dw":"m"},
  {"bjinfo":"速度跟踪精度推算边界","bj":data.vecFollowAcc_lower+"—"+data.vecFollowAcc_upper,"dw":"m"},
  {"bjinfo":"角度跟踪精度推算边界","bj":data.angleFollowAcc_lower+"—"+data.angleFollowAcc_upper,"dw":"m"},
  {"bjinfo":"命中率推算边界","bj":data.hitRate_lower+"—"+data.hitRate_upper,"dw":"m"},
  {"bjinfo":"抗压制干扰成功率推算边界","bj":data.antiPressRate_lower+"—"+data.antiPressRate_upper,"dw":"m"},
  {"bjinfo":"抗欺骗干扰成功率推算边界","bj":data.antiCheatRate_lower+"—"+data.antiCheatRate_upper,"dw":"m"}];
  return keys;
};
// 返回
const onBack = () => {
  $router.push({
    path: '/antiJamPerformBoundaryCalculate/testSampleSelected',
    query: {},
  });
}
// 导出
const onExport = () => {
  downloadFile(downloadboundaryExcelFile,{ caseId: route.query.dealSampleId },'性能边界数据'+"-"+route.query.dealSamplename+"-"+route.query.dealSampleId);
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/buttons';
.boundary-calculate {
  .layout-container-table {
    .el-button--small {
      background: transparent;
      color: rgba(24, 81, 237, 1);
    }
  }
  .visual-box {
    height: calc(100vh - 120px);
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .base-info-form .el-input{
    width: 200px;
  }
  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
  }
  
  .base-info-form_result{
    .el-form-item{
    padding-left: 60px;
  }
  } 
}

</style>
